<template>
	<!-- 高级搜索 说明请看readMe -->
	<div class="dr-form">
		<div class="formTop fontItemSize" :style="{ height: toggleHeight}">
			<div :class="getClass(item.type,item.double)" v-for="(item,index) in opt.items" v-if="opt.items.length>0" :key="index">
				<label :class="opt.labelType=='text'?'labelText':''"><span :class="item.required?['requireText']:['requireText','textHidden']"></span>{{item.label}}</label>
				<div>
					<!-- text纯文字 -->
					<div class="formItemText" v-if="item.type==='text'">{{item.data}}</div>
					<!-- href超链接 -->
					<a class="formItemText" style="color: #7e6b5a;" v-else-if="item.type==='href'" href="javascript:;" @click="goto(item.data)">{{item.data[0]}}</a>
					<!-- input框 -->
					<el-input :disabled="item.disabled" v-model="opt.items[index].value" :placeholder="item.placeholder" v-else-if="item.type==='input'"
					 @change="toParent" size="small"></el-input>
					<!-- 时间 起止 -->
					<el-date-picker :disabled="item.disabled" v-model="opt.items[index].value" :placeholder="item.placeholder"
					 v-else-if="item.type==='daterange'" @change="toParent" type="daterange" range-separator="至" start-placeholder="开始日期"
					 end-placeholder="结束日期" size="small"></el-date-picker>
					<!-- 时间 起止 -->
					<el-date-picker :disabled="item.disabled" v-model="opt.items[index].value" :placeholder="item.placeholder"
					 v-else-if="item.type==='datetimerange'" @change="toParent" type="datetimerange" range-separator="至"
					 start-placeholder="开始日期" end-placeholder="结束日期" size="small"></el-date-picker>
					<!-- 时间 单选 -->
					<el-date-picker :disabled="item.disabled" size="small" v-model="opt.items[index].value" v-else-if="item.type==='datetime'"
					 @change="toParent" type="datetime" :placeholder="item.placeholder"></el-date-picker>
					<!-- 选择日期 -->
					<el-date-picker :disabled="item.disabled" size="small" v-model="opt.items[index].value" v-else-if="item.type==='date'"
					 @change="toParent" type="date" :placeholder="item.placeholder"></el-date-picker>
					<!-- 下拉框 -->
					<el-select :disabled="item.disabled" :multiple="item.multiple" filterable size="small" v-model="opt.items[index].value"
					 :placeholder="item.placeholder" v-else-if="item.type==='dropdown'" @change="toParent(opt.items[index].value,item.key)">
						<el-option :label="data.label" :value="data.value" v-for="(data,index) in item.data" :key="index"></el-option>
					</el-select>
					<!-- 单选框 -->
					<el-radio-group :disabled="item.disabled" v-model="opt.items[index].value" v-else-if="item.type==='radio'" @change="toParent">
						<el-radio v-for="(radio,radioIndex) in opt.items[index].data" :key="radioIndex" :label="radio.value">{{radio.label}}</el-radio>
					</el-radio-group>
					<!-- 级联选择器(两个框) -->
					<el-cascader filterable :disabled="item.disabled" style="flex-grow: 1;" size="small" v-else-if="item.type==='cascaderSingle'"
					 v-model="opt.items[index].value" :options="opt.items[index].data" @change="toParent"></el-cascader>
					<!-- 级联选择器(省市区+详细地址) -->
					<div class="cascaderDouble" v-else-if="item.type==='cascaderDouble'">
						<el-cascader :disabled="item.disabled" size="small" v-model="opt.items[index].value" :options="opt.items[index].data"
						 @change="toParent"></el-cascader>
						<el-input :disabled="item.disabled" v-model="opt.items[index].value2" @change="toParent" class="cascaderDoubleInput"
						 size="small" placeholder="详细地址"></el-input>
					</div>
					<!-- 根据地区选择门店 -->
					<area-select v-else-if="item.type==='areaSelect'" @changeShop="changeShop" ref="areaSelector" />
					<span class="requireFooterText" v-if="item.requireText">{{item.requireText}}</span>
				</div>
				
			</div>
			<div class="endFormItem normal-btn-group" v-show="this.closeToggle==true">
				<div v-for="(item,index) in opt.btnGroup" :key="index">
					<div v-if="item.type==='search'" class="normal-btn query-btn" @click="toParent(item.type)">
						<img class="icon" src="../../../assets/img/button_search.png" alt> {{item.label}}
					</div>
					<div v-else-if="item.type==='clear'" class="normal-btn empty-input-btn" @click="toParent(item.type)">
						<img class="icon" src="../../../assets/img/button_delete.png" alt> {{item.label}}
					</div>
					<div v-else-if="item.type==='export'" class="normal-btn export-exl-btn" @click="toParent(item.type)">
						<img class="icon" src="../../../assets/img/button_export.png" alt> {{item.label}}
					</div>
					<div v-if="item.type==='phoneSearch'" class="normal-btn query-btn" @click="toParent(item.type)">
						<img class="icon" src="../../../assets/img/icon_phone.png" style="width: 11px;height: 16px;" alt> {{item.label}}
					</div>
				</div>
			</div>
			<!-- <div class="endFormItem normal-btn-group" v-show="closeToggle"> -->

		</div>
		<div class="endFormItem normal-btn-group" v-show="this.closeToggle==false" :class="flowFlag?'flow':''">
			<div v-for="(item,index) in opt.btnGroup" :key="index">
				<div v-if="item.type==='search'" class="normal-btn query-btn" @click="toParent(item.type)">
					<img class="icon" src="../../../assets/img/button_search.png" alt> {{item.label}}
				</div>
				<div v-else-if="item.type==='clear'" class="normal-btn empty-input-btn" @click="toParent(item.type)">
					<img class="icon" src="../../../assets/img/button_delete.png" alt> {{item.label}}
				</div>
				<div v-else-if="item.type==='export'" class="normal-btn export-exl-btn" @click="toParent(item.type)">
					<img class="icon" src="../../../assets/img/button_export.png" alt> {{item.label}}
				</div>
				<div v-if="item.type==='phoneSearch'" class="normal-btn query-btn" @click="toParent(item.type)">
					<img class="icon" src="../../../assets/img/icon_phone.png" style="width: 11px;height: 16px;" alt> {{item.label}}
				</div>
			</div>
		</div>
		<p class="closeTitle" v-if="opt.close">
			<span @click="toggle">
				{{closeTitle}}
				<i class="el-icon-arrow-up" v-show="closeToggle"></i>
				<i class="el-icon-arrow-down" v-show="!closeToggle"></i>
			</span>
		</p>
	</div>
</template>

<script>
	import {
		objDeepCopy
	} from "../../../assets/js/common.js";
	import areaSelect from '../areaSelect'
	export default {
		data() {
			return {
				toggleHeight: 104,
				defaultOpt: {},
				opt: {
					items: []
				},
				flowFlag: false,
				count: {
					one: 0,
					two: 0
				},
				btnSrc: {
					search: "../../../assets/img/button_search.png",
					clear: "../../../assets/img/button_delete.png",
					export: "../../../assets/img/button_export.png"
				},
				width: document.body.offsetWidth,
				closeTitle: "收起",
				closeToggle: true
			};
		},
		name: "advancedSearch",
		// props: {
		//   option: Object,
		//   clearCtrl: Boolean,
		//   exportCtrl: Boolean,
		//   searchCtrl: Boolean
		// },
		props: ["option"],
		components: {
			areaSelect
		},
		mounted() {
			this.initData();
		},
		methods: {
			getClass(name, db) {
				let className;
				switch (name) {
					case "datetimerange":
						className = ["formItem", "formItemDb"];
						break;
					case "daterange":
						className = ["formItem", "formItemDb"];
						break;
					case "address":
						className = [];
						break;
					case "cascaderSingle":
						db ? (className = ["formItem", "formItemDb"]) : ["formItem"];
						break;
					case "cascaderDouble":
						className = ["formItem", "formItemAll"];
						break;
					default:
						className = ["formItem"];
						break;
				}
				return className;
			},
			initData() {
				this.opt = objDeepCopy(this.option);
				this.defaultOpt = objDeepCopy(this.option);
				this.getCount();
			},
			getCount() {
				const data = this.opt.items;
				for (let i = 0; i < data.length; i++) {
					if (data[i].type == 'datetimerange' ||
						data[i].type == 'daterange' ||
						data[i].type == 'cascaderSingle' ||
						data[i].type == 'cascaderDouble') {
						this.count.two += 1;
					} else {
						this.count.one += 1;
					}
				};
				const sum = this.count.one + this.count.two * 2;
				const width = this.width;
			},
			goto(data) {
				const name = data[1];
				const param = data[2];
				this.$router.push({
					name: name,
					query: {
						...param
					}
				})
			},
			// 选择省市区、门店
			changeShop(area, store) {
				this.opt.items.map(ele => {
					if (ele.type === 'areaSelect') {
						ele.value = {
							area: area,
							store: store
						}
					}
				})
			},
			getEmitData() {
				const data = this.opt.items;
				let newData = {};
				for (let i in data) {
					if (data[i].value) {
						newData[data[i].key] = data[i].type === 'cascaderDouble' ? data[i].value2 ? data[i].value.concat([data[i].value2]) :
							data[i].value : data[i].value;
					}
				}
				return newData;
			},
			// 获取查询信息
			getFormData() {
				return this.opt.items;
			},
			clearForm() {
				// this.opt = objDeepCopy(this.defaultOpt);
				Array.isArray(this.opt.items) && this.opt.items.map(ele => {
					ele.value = ''
				})
				this.$refs.areaSelector && this.$refs.areaSelector[0].clearArea();
				this.$emit("onClear");
			},
			exportForm() {
				this.$emit("onExport");
			},
			searchForm() {
				this.$emit("onSearch", this.opt.items);
			},
			toParent(val, key) {
				const value = this.getEmitData();
				const items = this.opt.items;
				switch (val) {
					case "search":
						this.searchForm();
						break;
					case "export":
						this.exportForm();
						break;
					case "clear":
						this.clearForm();
						break;
					case "phoneSearch":
						this.$emit("phoneSearch", value, {
							key,
							val
						}, items);
						break;
					default:
						this.$emit("getChild", value, {
							key,
							val
						}, items);
						break;
				}
			},
			toggle() {
				/* 
				1200px
				1199px
				1024px 
				 */
				const sum = this.count.one + this.count.two * 2;
				const width = this.width;
				if (this.closeToggle === true) {
					if (width >= 1200) {
						if (sum > 7) {
							if (this.count.one == 5 || this.count.one == 7) {
								this.flowFlag = true;
							} else {
								this.flowFlag = false;
							}
							this.toggleHeight = 104 + "px";
						} else if (sum < 7 && sum > 4) {
							this.flowFlag = true;
							this.toggleHeight = 104 + "px";
						} else {
							this.flowFlag = true;
							this.toggleHeight = 104 + "px";
						}
					} else {
						this.flowFlag = false;
						this.toggleHeight = 104 + "px";
					}

					this.closeToggle = false;
					this.closeTitle = "高级搜索";
				} else {
					if (width >= 1200) {
						if (sum % 4 !== 0 && !(this.count.two * 2 == 4 && this.count.one == 3)) {
							if (this.count.two > 0 && (sum % 4 == 3 || sum % 4 == 2)) {
								this.flowFlag = true;
							} else {
								this.flowFlag = false;
							}
						} else {
							this.flowFlag = false;
						}
					} else {
						this.flowFlag = false;
					}
					this.toggleHeight = "auto";
					this.closeToggle = true;
					this.closeTitle = "收起";
				}
			}
		},
		watch: {
			option: {
				handler() {
					this.opt = objDeepCopy(this.option);
				},
				immediate: true,
				deep: true
			},
		}
	};
</script>

<style scoped lang="less">
	.dr-form {
		border-radius: 8px;
		background: #fff;
		margin-top: 10px;
		padding: 0 10px 10px;
	}

	.formTop {
		overflow: hidden;
	}

	.closeTitle {
		height: 25px;
		font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
		font-size: 14px;
		font-weight: normal;
		font-stretch: normal;
		line-height: 25px;
		letter-spacing: 0px;
		color: #7e6b5a;
		text-align: center;
		padding-top: 10px;

		>span {
			cursor: pointer;
		}
	}

	.flow {
		margin-top: -52px;
	}

	.endFormItem {
		padding: 10px 0;
		flex-grow: 2;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		align-self: center;
	}

	.formItem {
		padding: 10px 0;
		line-height: 32px;

		.requireFooterText {
			position: absolute;
			line-height: 16px;
			color: red;
		}

		.requireText {
			width: 6px;
			height: 6px;
			display: inline-block;
			vertical-align: middle;
			padding-right: 5px;
			background: url(../../../assets/img/flower_red.png);
			background-repeat: no-repeat;
		}

		.textHidden {
			visibility: hidden;
		}

		.formItemText {
			font-size: 14px;
			line-height: 32px;
			margin-left: 5px;
			color: #222;
			word-break: break-all;
		}

		.formItemTool:after {
			content: "*";
			color: #f56c6c;
			margin-right: 4px;
		}

		.el-radio-group {
			>label {
				line-height: 32px;
			}

			>label:first-child {
				margin-left: 10px;
			}
		}

		>div:last-child {
			flex-shrink: 10000;
			flex-grow: 1;
			position: relative;
			// height: 32px;

			>div {
				width: 100%;
			}
		}

		>label {
			line-height: 32px;
			padding-right: 5px;
			min-width: 95px;
			text-align: right;
			color: #222;
			font-size: 14px;
		}

		>label.labelText {
			min-width: initial;
			color: #888;
		}
	}

	// .formItemDb {
	//   /deep/ .el-cascader {
	//     width: calc(100% - 85px);
	//   }
	// }
	.formItemAll {
		width: 98% !important;

		.cascaderDouble {
			display: flex;

			.el-input {
				width: 60%;
			}
		}
	}

	@media only screen and (min-width: 1200px) {
		.formTop {
			display: flex;
			flex-wrap: wrap;

			.formItem {
				width: 24%;
				padding-right: 1%;
				font-size: 12px;
				display: flex;
			}

			.formItemDb {
				width: 49% !important;
			}

			.formItemAll {
				/deep/ .el-cascader {
					width: 40%;
					margin-right: 5px;
				}
			}
		}
	}

	@media only screen and (max-width: 1199px) {
		.formTop {
			display: flex; // justify-content: space-between;
			flex-wrap: wrap;

			.formItem {
				width: 48%;
				padding-right: 2%;
				font-size: 12px;
				display: flex;

				label {
					width: 100px;
					text-align: right;
				}
			}

			.formItemDb {
				width: 98% !important;
			}

			.formItemAll {
				/deep/ .el-cascader {
					width: 97%;
					margin-bottom: 5px;
				}

				.cascaderDouble {
					flex-wrap: wrap;
				}

				/deep/ .cascaderDoubleInput {
					width: 97%;
				}
			}
		}
	}

	@media only screen and (max-width: 1024px) {
		.formTop {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.formItem {
				width: 96%;
				font-size: 12px;
				display: flex;

				label {
					width: 100px;
					text-align: right;
				}
			}

			.formItemDb {
				width: 96% !important;
			}
		}
	}
</style>
